import React, { useEffect, useState } from "react";
import hljs from "highlight.js";
import { Radio } from "@ct0/ui";

import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  invalid: {
    "& .ct0-radio-option": {
      borderColor: "#c55252",
      color: "#c55252",
      "&.active .spot": {
        borderColor: "#c55252",
        color: "#c55252",
      },
    },
  },
});

export default function RadioPanel() {
  useEffect(() => {
    document.querySelectorAll("pre code").forEach((b) => {
      hljs.highlightBlock(b);
    });
  });

  const options = [
    { value: 1, label: "one (禁用状态)", disabled: true },
    { value: 2, label: "two" },
    { value: 3, label: "three" },
  ];

  const [active, setActive] = useState();

  const classes = useStyles();

  return (
    <div>
      <h2>Radio 单选框</h2>
      <ul>
        <li>用于在多个备选项中选中单个状态</li>
        <li>所有备选项默认可见，方便用户在比较中选择，但是选项不宜过多</li>
      </ul>

      <h2>代码演示</h2>
      <h4>有边框</h4>
      <Radio
        options={options}
        value={active}
        onChange={setActive}
        border={true}
      />
      <br />
      <h4>没有边框</h4>
      <Radio options={options} value={active} onChange={setActive} />
      <br />

      <h4>验证失败状态</h4>
      <Radio
        options={options}
        value={active}
        onChange={setActive}
        border={true}
        className={classes.invalid}
      />
      <br />

      <h2>调用方式</h2>
      <div className="code" style={{ marginTop: "10px" }}>
        <pre>
          <code className="language-jsx">
            import {"\u007b"} Radio {"\u007d"} from '@ct0/ui'{"\n"}
            {`
const options = [
  { value: 1, label: 'one', disabled: true },
  { value: 2, label: 'two' },
  { value: 3, label: 'three' },
]

const [active, setActive] = useState()

<Radio
  options={options}
  value={active}
  onChange={setActive}
  border={true}
/>
`}
          </code>
        </pre>
      </div>

      <h2>API</h2>
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td></td>
            <td>设置当前选中的值</td>
            <td>任意类型，默认 string | number</td>
            <td>-</td>
          </tr>
          <tr>
            <td>options</td>
            <td>*</td>
            <td>备选项</td>
            <td>{`Array<{ label: string, value: T, disabled?: boolean }>`}</td>
            <td>-</td>
          </tr>
          <tr>
            <td>border</td>
            <td></td>
            <td>边框</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td></td>
            <td>是否禁用</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td></td>
            <td>选项变化时的回调函数</td>
            <td>(val:T) =&gt; void</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
